<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Base64 编码解码</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入 Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(45deg, #ff9a9e, #fad0c4, #fbc2eb, #a18cd1);
            background-size: 300% 300%;
            animation: gradientAnimation 10s ease infinite;
            color: #fff;
            font-family: 'Arial', sans-serif;
        }
        @keyframes gradientAnimation {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .container {
            max-width: 800px;
            margin: 3rem auto;
            background: rgba(255, 255, 255, 0.9);
            color: #333;
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }
        .form-label {
            font-weight: bold;
        }
        .form-select, .form-control {
            border-radius: 0.5rem;
        }
        .btn-primary {
            width: 100%;
            padding: 0.8rem;
            font-size: 1rem;
            border-radius: 0.5rem;
            background: linear-gradient(135deg, #6a11cb, #2575fc);
            border: none;
        }
        .btn-primary:hover {
            background: linear-gradient(135deg, #2575fc, #6a11cb);
        }
        .btn-secondary {
            width: 100%;
            padding: 0.8rem;
            font-size: 1rem;
            border-radius: 0.5rem;
            background-color: #f1f1f1;
            border: none;
        }
        .btn-secondary:hover {
            background-color: #e0e0e0;
        }
    </style>
</head>
<body>

    <!-- 主容器 -->
    <div class="container">
        <h1 class="text-center text-primary mb-4">Base64 编码解码</h1>

        <!-- 编码部分 -->
        <div class="mb-5">
            <h3>编码</h3>
            <label for="encode_input" class="form-label">输入文本：</label>
            <textarea id="encode_input" class="form-control" rows="4" placeholder="请输入要编码的文本"></textarea>
            <button id="encode_btn" class="btn btn-primary mt-3">开始编码</button>
            <div class="mt-3">
                <label for="encoded_output" class="form-label">编码结果：</label>
                <textarea id="encoded_output" class="form-control" rows="4" readonly placeholder="编码结果会显示在这里"></textarea>
            </div>
        </div>

        <!-- 解码部分 -->
        <div>
            <h3>解码</h3>
            <label for="decode_input" class="form-label">输入Base64字符串：</label>
            <textarea id="decode_input" class="form-control" rows="4" placeholder="请输入Base64字符串"></textarea>
            <button id="decode_btn" class="btn btn-secondary mt-3">开始解码</button>
            <div class="mt-3">
                <label for="decoded_output" class="form-label">解码结果：</label>
                <textarea id="decoded_output" class="form-control" rows="4" readonly placeholder="解码结果会显示在这里"></textarea>
            </div>
        </div>

        <div class="text-center mt-4">
            <a href="{{ url_for('index') }}">返回首页</a>
        </div>
    </div>

    <!-- 引入 Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.getElementById('encode_btn').addEventListener('click', function () {
            var inputString = document.getElementById('encode_input').value;
            fetch('/base/encode', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ input_string: inputString })
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById('encoded_output').value = data.encoded_string;
            })
            .catch(error => alert('编码失败: ' + error));
        });

        document.getElementById('decode_btn').addEventListener('click', function () {
            var base64String = document.getElementById('decode_input').value;
            fetch('/base/decode', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ base64_string: base64String })
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById('decoded_output').value = data.decoded_string;
            })
            .catch(error => alert('解码失败: ' + error));
        });
    </script>

</body>
</html>
